<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Ajax 01 Page</h1>
    <fieldset>
        <legend>Ajax 异步请求</legend>
        <button onclick="doAjaxGet()">Ajax Get Request</button>
        <span id="resultId">Loading data ....</span>
    </fieldset>
</div>
<script>
    //js中排错方式：断点（debugger）,console.log,排除法
    function doAjaxGet(){//这个方法运行于浏览器进程内部的主线程（main）中
        debugger
        //1.创建XHR对象（此对象是ajax技术应用的入口对象，发送异步请求，处理客户端与服务端通讯过程中产生的数据）
        var xhr=new XMLHttpRequest();
        //2.设置状态监听
        //readyState的值0，1，2，3，4
        //0表示还未执行open方法
        //1表示已执行open方法但还未执行send方法
        //2表示已执行send方法
        //3表示客户端正在接收服务端响应的数据
        //4表示客户端已结完成响应数据的接收
        xhr.onreadystatechange=function (){
            if (xhr.readyState==4&&xhr.status==200){//xhr.status==200表示服务端的处理过程是ok的
                var result=xhr.responseText;
                document.getElementById("resultId").innerHTML=result;
            }
        }
        //3.建立与服务端的连接
        xhr.open("GET","http://localhost/doAjaxGet",false);//true表示异步请求,false表示同步，请求会在main线程发送
        //4.发送请求
        xhr.send(null);//将请求交给ajax引擎，异步用的不是main主线程是另一个线程
        console.log("do other ....");//run main thread
    }
</script>
</body>
</html>